<template>
	<div class="comment_container">
		<div class="comment_header">
			<el-input v-model="searList.id"  style="width: 200px;" clearable placeholder="评论ID"></el-input>
			<el-input v-model="searList.userName"  style="width: 200px;" clearable placeholder="用户姓名"></el-input>
			<el-input v-model="searList.spuName"  style="width: 200px;" clearable placeholder="商品名称"></el-input>
			<el-input v-model="searList.content"  style="width: 200px;" clearable placeholder="评论内容"></el-input>
			<el-button clearable  type="primary" icon="el-icon-search" @click="search()">查找</el-button>
		</div>
		<el-table v-loading="loading" :data="commentList"  size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
			<el-table-column align="center" label="评论编号" prop="id" />
			<el-table-column align="center" label="评论内容"  width="300" prop="content" />
			<el-table-column align="center" label="评论分数" prop="score" />
			<el-table-column align="center" label="用户ID" prop="userId" />
			<el-table-column align="center" label="用户昵称" prop="userNickName" />
			<el-table-column align="center" label="订单ID" prop="orderId" />
			<el-table-column align="center" label="商品ID" prop="spuId" />
			<el-table-column align="center" label="商品昵称" prop="spuTitle" />
			<el-table-column align="center" label="评论时间" prop="gmtCreate">
			<template slot-scope='scope'>
				{{timeFillter(scope.row.gmtCreate)}}
			</template>
			</el-table-column>
			<el-table-column align="center" label="操作"  width="200">
				<template slot-scope="scope">
					<el-button type="danger" size="mini" @click='deleteComment(scope.row)'>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-footer v-if="commentList.length>0" class="border-top d-flex align-items-center px-0  bg-white"
			style="margin-top: 36px;">
			<div style="flex: 1;" class="px-2">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="searList.pageNo" :page-sizes="[10, 20, 30, 50, 100]" :page-size="searList.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-footer>
	</div>
</template>

<script>
	import {
		getAppraise,
		deleteAppraise
	} from "../api.js"
	export default {
		data() {
			return {
				searList:{
					id:undefined,
					userName:undefined,
					spuName:undefined,
					pageNo: 1,
					limit: 20,
				},
				total:1,
				loading:false,
				commentList:[],
			}
		},
		methods:{
			// 获取数据
			getData(){
				this.loading = true;
				getAppraise(this.searList).then((res)=>{
					this.commentList = res.data.data.items;
					this.total = res.data.data.total;
					this.loading = false;
				})
			},
			handleSizeChange(val) { //每页条数
				this.searList.limit = val
				this.getData();
			},
			handleCurrentChange(val) { //前往第几页
				this.searList.pageNo = val
				this.getData()
			},
			// 搜索
			search() {
				this.searList.pageNo = 1;
				this.getData();
			},
			timeFillter(time){
						var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
						var M = date.getMonth() + 1 + '月';
						var D = date.getDate() + '日';
						var h = date.getHours() + '时';
						var m = date.getMinutes() + '分';
						return M + D + h + m;
			},
			// 删除
			deleteComment(value){
				
				this.$confirm("此操作将永久删除该评论" + value.id + ", 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}).then(()=>{
						deleteAppraise(value)
							.then((res) => {
								// console.log(res)
								this.$message.success("删除评论成功");
								let index = this.commentList.indexOf(value);
								this.commentList.splice(index, 1);
							})
							.catch(() => {});
					})
			}
		},
		created() {
			this.getData()
		}
	}
</script>

<style>
	.comment_container {
		width: 100%;
		height: 660px;
		overflow-x: auto;
		overflow-y: auto;
		padding: 20px;
	}

	.comment_header >*{
		margin-left: 5px;
		margin-bottom: 10px;
	}
</style>
